<template >
    <div info-container>
        <div class="formcontainer">

        <div class="changeForm" >
            <el-form :model="changeForm" :rules="changeFormRules" ref="form">
                <el-form-item prop="oldPassword" :rules="[{required: true, message: '原始密码不能为空'}]">
                    原始密码：<el-input type="password" v-model="changeForm.oldPassword"></el-input>
                </el-form-item>
                <el-form-item prop="newPassword" :rules="[{required: true, message: '新密码不能为空'}]">
                    新密码：<el-input type="password" v-model="changeForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item prop="confirmNewPassword" :rules="[{required: true, message: '新密码不能为空'}]">
                    再输入一次新密码：<el-input type="password" v-model="changeForm.confirmNewPassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="changePassword()">确认修改</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default {
        name: 'ChangePassword',
        data() {
            return {
                changeForm: {
                    oldPassword: '',
                    newPassword: '',
                    confirmNewPassword: ''
                },
                changeFormRules: {
                    oldPassword: [
                        { required: true, message: '请输入原始密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入长度在 6 到 20 之间的密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入长度在 6 到 20 之间的密码', trigger: 'blur' }
                    ],
                    confirmNewPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入长度在 6 到 20 之间的密码', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            changePassword(){
                // console.log(this.changeForm)
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        requests.put('/users/reset',this.changeForm).then(
                    (res) => {
                        // console.log(res)
                        if(res.code == 1) {
                            this.$message.success('密码修改成功！')
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                )
                    } else {
                        this.$message.error('密码不能为空')
                        return false;
                    }
                })
                
            }
        }
    }
</script>

<style lang="less" scoped>
    .info_container{
      height: 600px;
      width: 700px;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
    }
    .formcontainer{
        width: 900px;
        background-color: rgb(251, 251, 251);
        margin-left: 100px;
        margin-top: 50px;
        padding-left: 20px;
    }
    .changeForm{
        width: 400px;
        height: 600px;
        
        padding: 20px;
        font-size: large;
        background-color: rgb(251, 251, 251);
    }
</style>